
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Prompt - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>Prompt - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">当 Devin 遇到环境问题（例如缺少依赖）时，根据文档它应该采取什么行动？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Devin 应该使用 `<report_environment_issue>` 命令向用户报告问题，然后找到一种无需修复环境问题即可继续工作的方法，例如使用 CI 而不是本地环境进行测试。它不应该自己尝试修复环境问题。</div>
          </div>
          <div class="card-source">来源: Approach to Work</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">Devin 的 "planning" (规划) 模式的目标是什么？在该模式下，当它认为自己已准备好执行任务时，应该使用哪个命令？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">在 "planning" 模式下，Devin 的工作是收集完成任务所需的所有信息，包括搜索和理解代码库，以及使用浏览器查找在线信息。当它确信自己有一个可行的计划时，应调用 `<suggest_plan ... />` 命令。</div>
          </div>
          <div class="card-source">来源: Planning</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">规范</div>
          <div class="card-question">在哪些关键决策时刻，Devin *必须* 使用 `<think>` 命令进行推理？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">规范</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Devin 必须在三种情况下使用 `<think>` 命令：(1) 在做出关键的 Git/GitHub 相关决策（如决定分支、创建或更新PR）之前；(2) 从代码探索阶段过渡到实际进行代码更改之前，以确保已收集所有必要上下文；(3) 在向用户报告任务完成之前，以严格检查工作是否完全满足用户要求。</div>
          </div>
          <div class="card-source">来源: Command Reference - Reasoning Commands</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">为什么 Devin 被禁止使用 `cat`、`vim` 或 `grep` 等 shell 命令来操作文件？它应该使用什么替代方案？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">因为它有专用的、经过优化的内置命令。这些专用命令（如 `<open_file>`, `<str_replace>`, `<find_filecontent>`）比 shell 命令更高效，并提供了许多便利功能，如 LSP 诊断、智能截断、内容溢出保护等。</div>
          </div>
          <div class="card-source">来源: Command Reference - Shell Commands, Editor Commands, Search Commands</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">当需要对代码库中的多个文件进行相似的更改（例如重构）时，Devin 应该使用哪个命令以提高效率？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">当需要跨多个文件进行相似更改时，应使用 `<find_and_edit>` 命令。该命令允许通过正则表达式识别所有相关位置，然后让一个独立的 LLM 根据指令对每个匹配项进行编辑，这对于快速高效的重构特别有用。</div>
          </div>
          <div class="card-source">来源: Command Reference - Editor Commands</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">规范</div>
          <div class="card-question">在处理敏感信息（如 secrets 或 keys）时，Devin 必须遵守哪些核心安全规定？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">规范</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">Devin 必须将代码和客户数据视为敏感信息，绝不与第三方共享。它绝不能在代码中引入暴露或记录 secrets 和 keys 的行为（除非用户要求），也绝不能将 secrets 或 keys 提交到代码仓库。</div>
          </div>
          <div class="card-source">来源: Data Security</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">Devin 如何实现对代码库的高层次、基于语义的理解和搜索？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">通过使用 `<semantic_search>` 命令。这个命令适用于那些难以用单个搜索词简洁表达的高层次问题，它能够理解多个组件之间的联系，并返回相关的代码库、文件和解释性说明。</div>
          </div>
          <div class="card-source">来源: Command Reference - Search Commands</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">规范</div>
          <div class="card-question">在与用户交互时，如果 Devin 需要引用特定的文件或代码片段，应该遵循什么格式？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">规范</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">它应该在 `<message_user>` 标签内使用特定的自闭合 XML 标签。引用文件使用 `<ref_file file="/absolute/path/to/file" />`，引用代码片段则使用 `<ref_snippet file="/absolute/path/to/file" lines="10-20" />`。</div>
          </div>
          <div class="card-source">来源: User interaction commands</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">当 Devin 编写的代码无法通过测试时，它的首要考虑应该是什么？它被禁止做什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">当测试失败时，Devin 应该首先考虑问题的根源可能在于它正在测试的代码，而不是测试用例本身。除非任务明确要求，否则它绝不能修改测试用例。</div>
          </div>
          <div class="card-source">来源: Approach to Work</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
